<template>
    <div style="font-weight: 600" :class="{ descending: sort === 'desc', ascending: sort === 'asc' }">
        {{ title }}
        <span class="caret-wrapper">
            <i class="sort-caret ascending" @click="changeSort('asc')"></i>
            <i class="sort-caret descending" @click="changeSort('desc')"></i>
        </span>
    </div>
</template>

<script>
export default {
    props: {
        // 显示标题
        title: {
            type: String,
            default: '排序'
        },
        // 排序的key
        props: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            sort: ''
        }
    },
    methods: {
        changeSort(key) {
            this.sort = this.sort === key ? '' : key
            this.$emit('change', this.sort)
        },
        reSet() {
            this.sort = ''
        }
    }
}
</script>
